<template>
  <div class="login-status-test">
    <h1>登录状态测试</h1>

    <div class="status-card">
      <h2>当前状态</h2>
      <p>
        <strong>登录状态:</strong>
        <span :class="isLoggedIn ? 'status-success' : 'status-error'">
          {{ isLoggedIn ? '✅ 已登录' : '❌ 未登录' }}
        </span>
      </p>
      <p><strong>用户信息:</strong></p>
      <div class="user-info">
        <pre v-if="user">{{ JSON.stringify(user, null, 2) }}</pre>
        <p v-else class="no-user">无用户信息</p>
      </div>
    </div>

    <div class="actions-card">
      <h2>测试操作</h2>
      <el-button @click="testLogin" type="primary" :loading="loading">
        {{ loading ? '登录中...' : '测试登录' }}
      </el-button>
      <el-button @click="testLogout" type="danger">测试登出</el-button>
      <el-button @click="refreshStatus" type="success">刷新状态</el-button>
    </div>

    <div class="debug-card">
      <h2>调试信息</h2>
      <p><strong>Supabase URL:</strong> {{ supabaseUrl }}</p>
      <p><strong>Supabase Key:</strong> {{ supabaseKey.substring(0, 20) }}...</p>
      <p><strong>当前路径:</strong> {{ $route.path }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const route = useRoute()

const user = computed(() => userStore.user)
const isLoggedIn = computed(() => !!user.value)
const loading = computed(() => userStore.loading)

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

const testLogin = async () => {
  try {
    const result = await userStore.login({
      email: 'helinyu@qq.com',
      password: '123456a',
    })

    if (result.success) {
      ElMessage.success('登录成功！')
      console.log('✅ 登录成功，用户信息:', user.value)

      // 等待一下让状态更新
      setTimeout(() => {
        console.log('🔄 登录后状态:', {
          isLoggedIn: isLoggedIn.value,
          user: user.value,
          path: route.path,
        })
      }, 100)
    } else {
      ElMessage.error(result.message)
      console.error('❌ 登录失败:', result.message)
    }
  } catch (error) {
    ElMessage.error('登录异常: ' + error.message)
    console.error('❌ 登录异常:', error)
  }
}

const testLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('登出成功！')
  } catch (error) {
    ElMessage.error('登出失败: ' + error.message)
  }
}

const refreshStatus = async () => {
  try {
    await userStore.loadUserFromStorage()
    ElMessage.success('状态已刷新！')
    console.log('🔄 刷新后状态:', {
      isLoggedIn: isLoggedIn.value,
      user: user.value,
    })
  } catch (error) {
    ElMessage.error('刷新失败: ' + error.message)
  }
}

onMounted(async () => {
  console.log('🚀 页面加载，检查用户状态...')
  await userStore.loadUserFromStorage()
  console.log('📊 初始状态:', {
    isLoggedIn: isLoggedIn.value,
    user: user.value,
    path: route.path,
  })
})
</script>

<style scoped>
.login-status-test {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.status-card,
.actions-card,
.debug-card {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.status-card h2,
.actions-card h2,
.debug-card h2 {
  margin-top: 0;
  color: #333;
}

.status-success {
  color: #67c23a;
  font-weight: bold;
}

.status-error {
  color: #f56c6c;
  font-weight: bold;
}

.user-info {
  margin-top: 10px;
}

pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}

.no-user {
  color: #999;
  font-style: italic;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.debug-card p {
  margin: 5px 0;
  font-family: monospace;
  font-size: 14px;
}
</style>
